<template>
  <div class="modal-backdrop" @click="closeSelf">
     <div class="modal">
      <!-- <div class="modal-header">
        <h3>我是一个Modal的标题</h3>
      </div> -->
      <div class="modal-body">
          <div class="">
            <div class="spiner">
                <div class="sk-spinner sk-spinner-chasing-dots">
                    <div class="sk-dot1"></div>
                    <div class="sk-dot2"></div>
                </div>
            </div>
          </div>
      </div>
      <!-- <div class="modal-footer">
          <button type="button" class="btn btn-sm btn-primary" @click="closeSelf">停止搜索</button>
      </div> -->
  </div>

  </div>
  <!-- <div class="modal" :style="mainStyles">
      
      <div class="modal-body">
          <div class="">
            <div class="spiner-example">
                <div class="sk-spinner sk-spinner-chasing-dots">
                    <div class="sk-dot1"></div>
                    <div class="sk-dot2"></div>
                </div>
            </div>
          </div>
      </div>
      <div class="modal-footer">
          <button type="button" class="btn btn-sm btn-primary" @click="closeSelf">停止搜索</button>
      </div>
  </div> -->
</template>
<script>
export default {
  name: 'ModalLoading',
  props: {
    width:{
        type:[Number,String],//类型检测
        default:200 //父组件没传width时的默认值
    }   
  },
  data() {
    return {       
    }
  }, 
  methods: {    
    closeSelf() {
      this.$emit('close');     
    }
  },
  computed:{
     //计算属性来响应width属性，实时绑定到相应DOM元素的style上
      mainStyles() {
          let style = {};
          style.width = `${parseInt(this.width)}px`;
          return style;
      }      
  },
}
</script>
<style>
.modal-backdrop { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0;
    background-color: rgba(0,0,0,.3); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}
.modal {
    position: fixed;
    top: calc(50% - 100px); 
    right: 0; 
    bottom: 0; 
    left: calc(50% - 113px);  
    background-color: rgba(255, 255, 255, 0); 
    /* box-shadow: 2px 2px 20px 1px;  */
    overflow-x:auto; 
    display: flex; 
    flex-direction: column;
    border-radius: 16px;
    width: 200px;
    height: 200px;
} 
.modal-header { 
    border-bottom: 1px solid #eee; 
    color: #313131; 
    justify-content: space-between;
    padding: 15px; 
    display: flex; 
} 
.modal-footer { 
    border-top: 1px solid #eee; 
    justify-content: flex-end;
    padding: 15px; 
    display: flex; 
} 
.modal-body { 
    position: relative; 
    padding: 20px 10px; 
}
.btn-close, .btn-confirm {    
    border-radius: 8px;
    margin-left:16px;
    width:56px;
    height: 36px;
    border:none;
    cursor: pointer;
}
.btn-close {
    color: #313131;
    background-color:transparent;
}
.btn-confirm {
    color: #fff; 
    background-color: #2d8cf0;
}
.spiner {
    height: 100px;
    padding-top: 50px;
}

</style>



